<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
     v-dialogDrag
    :visible.sync="visible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
            <el-form-item label="设备名称" prop="basicdataEquipmentName"
                :rules="[
                 ]" >
              <el-input v-model="names" placeholder="请填写单体设备名称"  disabled=""></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <!-- <el-form-item label="装置(部件)名称" prop="basicdataPart"
                :rules="[
                 ]"> -->
              <el-form-item label="部件名称" prop="basicdataPart" :rules="[{required: true, message:'部件不能为空', trigger:'blur'}]">
               <el-select v-model="inputForm.basicdataPart" placeholder="请选择装置部件"  style="width:100%;" v-loading = 'isOneDropDownBoxLoading' :disabled=isOneDropDownBoxLoading>
                <el-option v-for="basicdataPart in inputForm.partsData" :key="basicdataPart.id" :label="'[' + basicdataPart.code + ']' + basicdataPart.name" :value="basicdataPart.id" ></el-option>
               </el-select>
              </el-form-item>
           <!-- </el-form-item> -->
        </el-col>
        <el-col :span="12">
            <!-- <el-form-item label="给油脂部位" prop="basicdataUnit"
                :rules="[
                 ]"> -->
             <el-form-item label="给油脂部位" prop="basicdataUnit" :rules="[]" >
              <el-select v-model="inputForm.basicdataUnit" placeholder="请选择油脂部位"  style="width:100%;" v-loading = 'isTwoDropDownBoxLoading' :disabled=isTwoDropDownBoxLoading>
                <el-option v-for="item in inputForm.componentData" :key="item.id" :label= "'[' + ']' +item.name" :value="item.id" ></el-option>
              </el-select>
              </el-form-item>
           <!-- </el-form-item> -->
        </el-col>
        <el-col :span="12">
            <el-form-item label="润滑方式" prop="basicdataOiling"
                :rules="[
                 ]">
              <!-- <el-input v-model="inputForm.basicdataOiling" placeholder="请填写润滑方式"     ></el-input> -->
              <el-select v-model="inputForm.basicdataOiling" placeholder="请选择周期单位" style="width:100%;" >
                <el-option v-for="basicdataOiling in $dictUtils.getDictList('basticdata_giveoile_standard_lubrication')" :label="basicdataOiling.label" :value="basicdataOiling.value" :key="basicdataOiling.value"></el-option>
              </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="24">
            <el-form-item label="油脂牌号" prop="basicdataMark"
                :rules="[
                 ]">
              <!-- <el-input v-model="inputForm.basicdataMark" placeholder="请填写油脂牌号"     ></el-input> -->
              <material-code :limit='1' :value="inputForm.basicdataMark" @getValue='(value) => {inputForm.basicdataMark=value}' ></material-code>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="润滑点数" prop="basicdataIndex"
                :rules="[
                 ]">
              <!-- <el-input v-model="inputForm.basicdataIndex" placeholder="请填写润滑点数"     ></el-input> -->
              <el-input-number v-model="inputForm.basicdataIndex" :min="0" :max="100" label="描述文字"   style="width:100%;"></el-input-number>
           </el-form-item>
        </el-col>
<!--        <el-col :span="12">
            <el-form-item label="点检" prop="basicdataCheck"
                :rules="[
                 ]">
              <el-input v-model="inputForm.basicdataCheck" placeholder="请填写点检"     ></el-input>
           </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="分工" prop="basicdataCheck"
              :rules="[
               ]">
            <el-radio-group v-model="inputForm.basicdataCheck">
              <el-radio-button v-for="radio in $dictUtils.getDictList('basicdata_repair_labor')" :label="radio.value" :key="radio.key">{{radio.label}}</el-radio-button>
            </el-radio-group>
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="给油脂标准" v-if="isGiveOilCheck"></el-checkbox>
                <el-checkbox label="更换油脂标准" v-if="isGiveOilCheck"></el-checkbox>
            </el-checkbox-group>
            </el-form-item>
            </el-col>
        <el-col >
        <el-divider content-position="left">给油脂标准</el-divider>
        </el-col>
        <el-col :span="12">
            <el-form-item label="油量" prop="basicdataOil"
                :rules="[
                 ]" >
              <el-input v-model="inputForm.giveOilNumber" placeholder="请填写给油脂标准油量" style="width:80%;" :disabled='isOneDropDownBox'></el-input>
              <el-select v-model="inputForm.giveOileData" placeholder="请选择油量单位"  style="width:20%;"  :disabled='isOneDropDownBox'>
                <el-option v-for="giveOileData in $dictUtils.getDictList('basticdata_giveoile_standard_landml')" :label="giveOileData.label" :value="giveOileData.value" :key="giveOileData.value" ref="part"></el-option>
              </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="周期" prop="basicdataPeriod"
                :rules="[
                 ]">
              <el-input-number v-model="inputForm.oileDateValue" :min="0" :max="100" label="描述文字"  style="width:80%;" :disabled='isOneDropDownBox'></el-input-number>
              <el-select v-model="inputForm.giveOiledateData" placeholder="请选择周期单位"  style="width:20%;" :disabled='isOneDropDownBox' @change="handleChangeCycles">
                <el-option v-for="giveOiledateData in $dictUtils.getDictList('basticdata_giveoile_standard_date')" :label="giveOiledateData.label" :value="giveOiledateData.value" :key="giveOiledateData.value" ref="part"></el-option>
              </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="责任人" prop="basicdataFix"
                :rules="[
                 ]">
                  <user-select :disabled='isOneDropDownBox' :limit='1' :value="inputForm.basicdataFix" @getValue='(value) => {inputForm.basicdataFix=value}'></user-select>
              <!-- <el-input v-model="inputForm.basicdataFix" placeholder="请填写检修"     ></el-input> -->
           </el-form-item>
        </el-col>
        <el-col >
        <el-divider content-position="left">更换油脂标准</el-divider>
        </el-col>
        <el-col :span="12">
            <el-form-item label="油量" prop="basicdataOilMeasure"
                :rules="[
                 ]">
              <el-input v-model="inputForm.replaceGiveOilNumber" placeholder="请填写更换油脂标准油量" style="width:80%;" :disabled='isTwoDropDownBox'></el-input>
              <el-select v-model="inputForm.giveReplaceOileData" placeholder="请选择更换油脂单位" @change="handleChangeCycles" style="width:20%;" :disabled='isTwoDropDownBox'>
                <el-option v-for="giveReplaceOileData in $dictUtils.getDictList('basticdata_giveoile_standard_landml')" :label="giveReplaceOileData.label" :value="giveReplaceOileData.value" :key="giveReplaceOileData.value" ref="part"></el-option>
              </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="周期" prop="basicdataCircle"
                :rules="[
                 ]">
              <el-input-number v-model="inputForm.replaceOileDateValue" :min="0" :max="100" label="描述文字"  style="width:80%;" :disabled='isTwoDropDownBox'></el-input-number>
              <el-select v-model="inputForm.giveReplaceOiledateData" placeholder="请选择周期单位"  style="width:20%;" :disabled='isTwoDropDownBox' @change="handleChangereplacecycles">
                <el-option v-for="giveReplaceOiledateData in $dictUtils.getDictList('basticdata_giveoile_standard_date')" :label="giveReplaceOiledateData.label" :value="giveReplaceOiledateData.value" :key="giveReplaceOiledateData.value" ref="part"></el-option>
              </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="责任人" prop="basicdataPost"
                :rules="[
                 ]">
                 <user-select :disabled='isTwoDropDownBox' :limit='1' :value="inputForm.basicdataPost" @getValue='(value) => {inputForm.basicdataPost=value}'></user-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="备注信息" prop="remarks"
                :rules="[
                 ]">
          <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"     ></el-input>
           </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">关闭</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  import UserSelect from '@/components/userSelect'
  import materialCode from '@/myComponents/materialCode/index.vue'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          partDevice: {
            id: '', // 传回来的id
            code: '' // 传回来的code
          },
          id: '',
          basicdataGiveOilStandard: '', // chekList复选框的实际字符串转换返回后台以及mysql数据库
          basicdataPart: '', // 首级下拉框四级数据prop
          basicdataUnit: '', // 次级下拉框五级数据prop
          basicdataOiling: [], // 润滑方式
          basicdataMark: '', // 油脂牌号
          basicdataIndex: 0, // 润滑点数
          basicdataOil: 0, // 给油脂标准油量数
          basicdataPeriod: 0, // 给油脂标准周期
          basicdataOilMeasure: '', // 更换油脂标准油量数
          basicdataCircle: '', // 更换油脂标准周期
          basicdataCheck: '', // 分工
          basicdataFix: '', // 给油脂标准责任人
          basicdataPost: '', // 更换给油脂标准责任人
          remarks: '', // 备注信息
          basicdataEquipmentName: '', // 设备名称
          partsData: [], // 部件数据
          componentData: [], // 零件数据
          giveOileData: [], // 首次给油字典下拉框数据
          giveReplaceOileData: [], // 再次给油字典下拉框数据
          giveOiledateData: '', // 给油脂标准周期单位的字典数组接收
          giveReplaceOiledateData: '', // 更换给油脂标准周期单位的字典数组接收
          replaceGiveOilNumber: 0, // 更换给油脂油量数
          giveOilNumber: 0, // 给油脂油量数
          replaceOileDateValue: 0, // 更换给油脂标准周期数
          oileDateValue: 0, // 给油脂标准周期数
          oilName: '' // 给油脂部位名称
        },
        fileDevicename: '', // 设备名称
        isOneDropDownBoxLoading: false, // 判断一级下拉框是否正在加载数据
        isTwoDropDownBoxLoading: false, // 判断二级下拉框是否正在加载数据
        isOneDropDownBox: true, // 判断给油脂标准一栏是否禁用
        isTwoDropDownBox: true, // 判断更换给油脂标准一栏是否禁用
        isGiveOilCheck: false, //给油脂和更换给油脂的复选框显隐
        countOne: 0, // 周期点击
        countTwo: 0, // 更换周期点击
        checkList: [], // 职位给油和更换给油复选框
        countfirst: 0, // 首次加载的二级下拉框置空判断
        conversion: '', // 转化处理
        names: '' // 单体设备名称转化
      }
    },
    watch: {
        // 监听职位给油和更换给油复选框
        checkList (newVal, oldVal) {
          if (newVal.length === 2) {
            this.isOneDropDownBox = false
            this.isTwoDropDownBox = false
          } else {
            if (this.isGiveOilCheck === true) {
              if (newVal[0] === '给油脂标准') {
                this.isOneDropDownBox = false
              } else {
                this.isOneDropDownBox = true
                this.inputForm.giveOileData = 'ml'
                this.inputForm.giveOiledateData = 'H'
                this.inputForm.basicdataFix = ''
                this.inputForm.giveOilNumber = 0
                this.inputForm.oileDateValue = 0
              }
              if (newVal[0] === '更换油脂标准') {
                this.isTwoDropDownBox = false
              } else {
                this.isTwoDropDownBox = true
                this.inputForm.giveReplaceOileData = 'ml'
                this.inputForm.replaceOileDateValue = 0
                this.inputForm.giveReplaceOiledateData = 'H'
                this.inputForm.basicdataPost = ''
                this.inputForm.replaceGiveOilNumber = 0
              }
              }
            }
        },
        // 监听职位并做显隐初始化处理
        'inputForm.basicdataCheck': function (newVal, oldVal) {
            if (newVal === '检修') {
              this.isGiveOilCheck = true
              this.conversion = this.checkList
              this.checkList = ''
              this.checkList = this.conversion
            } else if (newVal === '岗位') {
              this.isGiveOilCheck = false
              this.isOneDropDownBox = false
              this.isTwoDropDownBox = true
              this.inputForm.giveReplaceOileData = 'ml'
              this.inputForm.replaceOileDateValue = 0
              this.inputForm.giveReplaceOiledateData = 'H'
              this.inputForm.basicdataPost = ''
              this.inputForm.replaceGiveOilNumber = 0
            } else if (newVal === '点检') {
              this.isGiveOilCheck = true
              this.conversion = this.checkList
              this.checkList = ''
              this.checkList = this.conversion
            }
            this.inputForm.basicdataCheck = newVal
        },
         // 监测设备名称编号变化(监听某个对象里面的某个固定属性时候所用如inputForm.partDevice.id)
        // 深度监听
        'inputForm.partDevice.id': function (newVal, oldVal) {
          this.getNextNode(newVal)
        },
        // 监测首级下拉框变化
        'inputForm.basicdataPart': function (newVal, oldVal) {
          // 如果首级下拉框拿到了数据但还在视图加载，这里做了一个强行停止试图加载判断
          if (this.isOneDropDownBoxLoading === true) {
           this.isOneDropDownBoxLoading = false
          }
          if (newVal !== '') {
           this.dropDownBoxAssociated(newVal)
           }
        },
        'inputForm.basicdataUnit': function (newVal, oldVal) {
            this.productTypeReturn(newVal)
        }
      },
    components: {
      UserSelect,
      materialCode
    },
    methods: {
      // 发送给油脂部位方法返回给油脂名称
      productTypeReturn (id) {
        this.$http({
          url: `/basicdata/basictree/partDeviceNode/queryById?id=${id}`,
          method: 'get'
        }).then(({ data }) => {
          this.inputForm.oilName = data.partDeviceNode.name
          console.log(this.inputForm.oilName)
        })
      },
      // 判断周期点击
      handleChangeCycles (val) {
        this.countOne = 1
      },
      // 判断更换周期点击
      handleChangereplacecycles (val) {
        this.countTwo = 1
      },
      // 获取四级数据
      getNextNode (presentNode) {
        this.isOneDropDownBoxLoading = true
        this.$http({
          url: `/basicdata/basictree/partDeviceNode/nextLevelTreeData`,
          method: 'get',
          params: {
            id: presentNode
          }
        }).then(({ data }) => {
          this.inputForm.partsData = data.data
          this.isOneDropDownBoxLoading = false
        })
      },
      // 关闭触发的方法
      close () {
        this.visible = false
        this.countfirst = 0
      },
      // 暂时的初始化方法处理（后期会改进）
      dataInitialize () {
        this.countfirst = 0
        this.inputForm.componentData = ''
        this.isGiveOilCheck = false
        this.inputForm.basicdataUnit = ''
        this.checkList = []
        this.countOne = 0
        this.countTwo = 0
        this.inputForm.basicdataPart = ''
        this.inputForm.giveOileData = 'ml'
        this.inputForm.giveReplaceOileData = 'ml'
        this.inputForm.giveOilNumber = 0
        this.inputForm.replaceGiveOilNumber = 0
        this.isOneDropDownBox = true
        this.isTwoDropDownBox = true
        this.inputForm.basicdataOiling = ''
        this.inputForm.oileDateValue = 0
        this.inputForm.replaceOileDateValue = 0
        this.inputForm.giveOiledateData = 'H'
        this.inputForm.giveReplaceOiledateData = 'H'
        this.inputForm.basicdataFix = ''
        this.inputForm.basicdataPost = ''
      },
      // 链接List的主要接口 ，新建，修改，查看时候会调用
      init (method, id, partDevice, docType) {
        this.names = '[' + partDevice.code + ']' + partDevice.name
        this.fileDevicename = partDevice.name
        this.inputForm.partDevice.id = partDevice.id
        this.inputForm.partDevice.code = partDevice.code
        this.method = method
        this.dataInitialize()
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建设备给油脂标准`
        } else if (method === 'edit') {
          this.title = '修改设备给油脂标准'
        } else if (method === 'view') {
          this.title = '查看设备给油脂标准'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.inputForm.partDevice.id = partDevice.id
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/basicdata/standard/basicdataGiveOilMainForm/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.basicdataGiveOilMainForm)
              if (this.inputForm.basicdataGiveOilStandard.split(',')[0] !== '') {
                this.checkList = this.inputForm.basicdataGiveOilStandard.split(',')
              } else {
                this.checkList = []
              }
              this.inputForm.basicdataEquipmentName = '[' + partDevice.code + ']' + this.inputForm.basicdataEquipmentName
              this.getNextNode(partDevice.id)
              this.loading = false
            })
          }
        })
      },
      // 二级下拉框与一级下拉框关联方法(传的参数是一级下拉框的id值)
      dropDownBoxAssociated (newVal) {
        this.isTwoDropDownBoxLoading = true
          if (this.countfirst >= 1) {
            // this.component = ''
            this.inputForm.basicdataUnit = ''
          } else {
            this.countfirst = this.countfirst + 1
          }
        this.$http({
          url: `/basicdata/basictree/partDeviceNode/nextLevelTreeData`,
          method: 'get',
          params: {
            id: newVal
          }
        }).then(({ data }) => {
          this.inputForm.componentData = data.data
          this.isTwoDropDownBoxLoading = false
        })
      },
      // 表单提交时候的名称转化，以及拼接
      converSion () {
        // 首次加载的二级下拉框置空判断
        this.countfirst = 0
        this.inputForm.basicdataEquipmentName = this.fileDevicename
        this.inputForm.basicdataOil = this.inputForm.giveOilNumber + this.inputForm.giveOileData + ''
        this.inputForm.basicdataOilMeasure = this.inputForm.replaceGiveOilNumber + this.inputForm.giveReplaceOileData + ''
        this.inputForm.basicdataGiveOilStandard = this.checkList + ''
        this.inputForm.basicdataPeriod = this.inputForm.oileDateValue + this.inputForm.giveOiledateData
        this.inputForm.basicdataCircle = this.inputForm.replaceOileDateValue + this.inputForm.giveReplaceOiledateData
      },
      // 表单提交
      doSubmit () {
        this.converSion()
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/basicdata/standard/basicdataGiveOilMainForm/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList', data)
              }
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>
<style>
  .el-checkbox-button.is-checked .el-checkbox-button__inner {
      color: #FFF;
      background-color: #0078F1;
      border-color: #0078F1;
      -webkit-box-shadow: -1px 0 0 0 #66aef7;
      box-shadow: -1px 0 0 0 #66aef7;
  }
</style>
